// components/elements/TemplateText
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Box, Typography, Button, Paper } from '@mui/material';
import RocketOutlinedIcon from '@mui/icons-material/RocketOutlined';
import LaunchOutlinedIcon from '@mui/icons-material/LaunchOutlined';
import BuildOutlinedIcon from '@mui/icons-material/BuildOutlined';
import IntegrationInstructionsOutlinedIcon from '@mui/icons-material/IntegrationInstructionsOutlined';
import GavelOutlinedIcon from '@mui/icons-material/GavelOutlined';
import ArchitectureOutlinedIcon from '@mui/icons-material/ArchitectureOutlined';
import ChecklistOutlinedIcon from '@mui/icons-material/ChecklistOutlined';
import PlayArrowOutlinedIcon from '@mui/icons-material/PlayArrowOutlined';
import SpeedOutlinedIcon from '@mui/icons-material/SpeedOutlined';
import DataObjectOutlinedIcon from '@mui/icons-material/DataObjectOutlined';
import RouterOutlinedIcon from '@mui/icons-material/RouterOutlined';
import TerminalOutlinedIcon from '@mui/icons-material/TerminalOutlined';
import CodeOutlinedIcon from '@mui/icons-material/CodeOutlined';
import ApiOutlinedIcon from '@mui/icons-material/ApiOutlined';
import StackedLineChartOutlinedIcon from '@mui/icons-material/StackedLineChartOutlined';

export const HeroSection = ({ darkMode }) => {
  const navigate = useNavigate();

  const navigatePage = (url) => {
    window.open(url, '_blank', 'noopener,noreferrer');
  };

  const navigateOpen = (path) => {
    if (path.startsWith('http')) {
      navigatePage(path);
    } else {
      navigate(path);
    }
  };
  
  return (
    <Paper elevation={0} sx={{ bgcolor: 'primary.main', textAlign: 'center', borderRadius: 2 }}>
      <RocketOutlinedIcon sx={{ fontSize: 60, color: 'white', mt: 2 }} />
      <Typography variant="h2" fontWeight="bold" color="white">
        We Build Go/Node + React powered SAAS Templates
      </Typography>
      <Button
        onClick={() => navigateOpen('https://startersaas.pro/')}
        variant="contained"
        sx={{
          fontSize: '1.25rem',
          fontWeight: 'bold',
          padding: '12px 24px',
          textTransform: 'none',
          my: 2,
          bgcolor: 'white',
          color: 'primary.main',
          '&:hover': {
            bgcolor: 'grey.100',
          }
        }}
        startIcon={<LaunchOutlinedIcon />}
      >
        View Demo
      </Button>
    </Paper>
  );
};

export const LaunchSection = ({ color }) => {
  return (
    <Paper 
      elevation={0} 
      sx={{ 
        bgcolor: 'primary.main', 
        borderRadius: 2 
      }}
    >
      <Box sx={{ display: 'flex', alignItems: 'center' }}>
        <SpeedOutlinedIcon sx={{ color: 'white', fontSize: 60, ml: 2 }} />
        <Typography 
          variant="h4"
          color="white"
          fontWeight="medium"
          sx={{ ml: 1 }}
        >
          We Save You 3 Months of Development
        </Typography>
      </Box>
      <Typography 
        color="white"
        sx={{
          fontSize: '1.5rem',
          lineHeight: 1.4,
          mx: 2,
          mb: 2
        }}
      >
        Launch in days, not months. 5-minute setup with our production-ready Go/Node API and React frontend stack.
      </Typography>
    </Paper>
  );
};

export const FeaturesSection = () => {
  return (
    <Paper elevation={0} sx={{ bgcolor: 'primary.main', borderRadius: 2 }}>
      <Box sx={{ display: 'flex', alignItems: 'center' }}>
        <BuildOutlinedIcon sx={{ fontSize: 60, ml: 2, color: 'white' }} />
        <Typography variant="h3" fontWeight="medium" color="white" sx={{ ml: 1 }}>
          Our Core Functionality
        </Typography>
      </Box>
      
      <Typography color="white" sx={{ fontSize: '1.1rem', mx: 2 }}>
        Streamlined subscription management with Stripe integration. Handles trial periods, plan changes, payment processing (3D Secure enabled), and customer notifications automatically.
      </Typography>
      
      <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' }, gap: 2, m: 2 }}>
        <Paper sx={{ p: 2 }}>
          <Typography variant="h6" fontWeight="bold" gutterBottom>
            Accounts & Subdomains
          </Typography>
          <Typography variant="body1">
            Custom subdomain creation and management for each client account.
          </Typography>
        </Paper>
        
        <Paper sx={{ p: 2 }}>
          <Typography variant="h6" fontWeight="bold" gutterBottom>
            Subscription Management
          </Typography>
          <Typography variant="body1">
            Complete Stripe integration for recurring payment handling.
          </Typography>
        </Paper>
        
        <Paper sx={{ p: 2 }}>
          <Typography variant="h6" fontWeight="bold" gutterBottom>
            Frictionless Trials
          </Typography>
          <Typography variant="body1">
            No-commitment trial periods without credit card requirements.
          </Typography>
        </Paper>
        
        <Paper sx={{ p: 2 }}>
          <Typography variant="h6" fontWeight="bold" gutterBottom>
            User Authentication
          </Typography>
          <Typography variant="body1">
            Secure login, registration and password management flows.
          </Typography>
        </Paper>
      </Box>
    </Paper>
  );
};

export const ComponentsSection = () => {
  return (
    <Paper elevation={0} sx={{ bgcolor: 'primary.main', borderRadius: 2 }}>
      <Box sx={{ display: 'flex', alignItems: 'center' }}>
        <IntegrationInstructionsOutlinedIcon sx={{ fontSize: 60, ml: 2, color: 'white' }} />
        <Typography variant="h3" fontWeight="medium" color="white" sx={{ ml: 1 }}>
          Our Tech Architecture
        </Typography>
      </Box>
      
      <Typography color="white" sx={{ fontSize: '1.1rem', mx: 2 }}>
        Choose between Go API (Gofiber) or Node API (Express) backends with React 18 frontend. Both APIs expose identical endpoints for maximum flexibility.
      </Typography>
      
      <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' }, gap: 2, m: 2 }}>
        <Paper sx={{ p: 2 }}>
          <Typography variant="h6" fontWeight="bold" gutterBottom>
            React 18 Frontend
          </Typography>
          <Typography variant="body2">• react@18 and react-dom@18</Typography>
          <Typography variant="body2">• react-query for data fetching</Typography>
          <Typography variant="body2">• react-hook-form for validation</Typography>
          <Typography variant="body2">• Material UI components</Typography>
        </Paper>
        
        <Paper sx={{ p: 2 }}>
          <Typography variant="h6" fontWeight="bold" gutterBottom>
            Background Processing
          </Typography>
          <Typography variant="body2">• Scheduled tasks with Gocron/node-cron</Typography>
          <Typography variant="body2">• Payment notifications</Typography>
          <Typography variant="body2">• Expiring trial alerts</Typography>
          <Typography variant="body2">• Subscription status updates</Typography>
        </Paper>
        
        <Paper sx={{ p: 2 }}>
          <Typography variant="h6" fontWeight="bold" gutterBottom>
            Stripe Integration
          </Typography>
          <Typography variant="body2">• @stripe/stripe-js and @stripe/react-stripe-js</Typography>
          <Typography variant="body2">• 3D Secure payment processing</Typography>
          <Typography variant="body2">• Webhook event handling</Typography>
          <Typography variant="body2">• Customer portal integration</Typography>
        </Paper>
        
        <Paper sx={{ p: 2 }}>
          <Typography variant="h6" fontWeight="bold" gutterBottom>
            Developer Experience
          </Typography>
          <Typography variant="body2">• Fully customizable codebase</Typography>
          <Typography variant="body2">• PM2 process management</Typography>
          <Typography variant="body2">• OpenTelemetry integration</Typography>
          <Typography variant="body2">• Clear API documentation</Typography>
        </Paper>
      </Box>
    </Paper>
  );
};

export const LicenseSection = ({ color }) => {
  return (
    <Paper 
      elevation={0} 
      sx={{ 
        bgcolor: 'primary.main', 
        borderRadius: 2,
        textAlign: 'center'
      }}
    >
      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <GavelOutlinedIcon sx={{ color: 'white', fontSize: 60 }} />
        <Typography 
          variant="h4"
          color="white"
          fontWeight="medium"
        >
          MIT Licensed
        </Typography>
      </Box>
      <Typography 
        color="white"
        sx={{
          fontSize: '1.5rem',
          mb: 2
        }}
      >
        Full ownership, no restrictions. Clone and customize with our permissive MIT license.
      </Typography>
      <Button 
        variant="contained" 
        size="large"
        sx={{
          fontSize: '1.2rem',
          textTransform: 'none',
          backgroundColor: 'white',
          color: 'primary.main',
          fontWeight: 'bold',
          px: 4,
          py: 1.5,
          mb: 2
        }}
      >
        Get the starters
      </Button>
    </Paper>
  );
};

export const TechStackSection = () => {
  return (
    <Paper elevation={0} sx={{ bgcolor: 'primary.main', borderRadius: 2 }}>
      <Box sx={{ display: 'flex', alignItems: 'center' }}>
        <ArchitectureOutlinedIcon sx={{ fontSize: 60, ml: 2, color: 'white' }} />
        <Typography variant="h3" fontWeight="medium" color="white" sx={{ ml: 1 }}>
          Our Tech Stack
        </Typography>
      </Box>
      
      <Typography color="white" sx={{ fontSize: '1.1rem', mx: 2 }}>
        Powers production SaaS applications including Articoli e Social and MenuClick24. Built with proven, scalable technologies.
      </Typography>
      
      <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr', md: '1fr 1fr 1fr 1fr' }, gap: 2, m: 2 }}>
        <Paper sx={{ p: 2 }}>
          <Typography variant="h6" fontWeight="bold" gutterBottom>
            Database
          </Typography>
          <Typography variant="body2">• MongoDB</Typography>
          <Typography variant="body2">• Document-based storage</Typography>
          <Typography variant="body2">• Flexible schema</Typography>
        </Paper>
        
        <Paper sx={{ p: 2 }}>
          <Typography variant="h6" fontWeight="bold" gutterBottom>
            Go API
          </Typography>
          <Typography variant="body2">• Fiber framework</Typography>
          <Typography variant="body2">• Gocron scheduling</Typography>
          <Typography variant="body2">• High performance</Typography>
        </Paper>
        
        <Paper sx={{ p: 2 }}>
          <Typography variant="h6" fontWeight="bold" gutterBottom>
            Node API
          </Typography>
          <Typography variant="body2">• Express.js</Typography>
          <Typography variant="body2">• node-cron</Typography>
          <Typography variant="body2">• JWT authentication</Typography>
        </Paper>
        
        <Paper sx={{ p: 2 }}>
          <Typography variant="h6" fontWeight="bold" gutterBottom>
            Frontend
          </Typography>
          <Typography variant="body2">• React 18</Typography>
          <Typography variant="body2">• Material UI</Typography>
          <Typography variant="body2">• react-query</Typography>
          <Typography variant="body2">• react-hook-form</Typography>
        </Paper>
      </Box>
    </Paper>
  );
};

export const FeaturesListSection = () => {
  return (
    <Paper elevation={0} sx={{ bgcolor: 'primary.main', borderRadius: 2 }}>
      <Box sx={{ display: 'flex', alignItems: 'center' }}>
        <ChecklistOutlinedIcon sx={{ fontSize: 60, ml: 2, color: 'white' }} />
        <Typography variant="h3" fontWeight="medium" color="white" sx={{ ml: 1 }}>
          Our Technical Features
        </Typography>
      </Box>
      
      <Typography color="white" sx={{ fontSize: '1.1rem', mx: 2 }}>
        Focus on 80/20 principle: essential functionality, no bloat. Developer-centric approach without unnecessary features or complexity.
      </Typography>
      
      <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' }, gap: 2, m: 2 }}>
        <Paper sx={{ p: 2 }}>
          <Typography variant="h5" fontWeight="bold" mb={1} color="primary.main">
            API and Frontend Features
          </Typography>
          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr', gap: 0.5 }}>
            <Typography variant="body2">• user registration of account with subdomain, email and password</Typography>
            <Typography variant="body2">• user email activation with 6 characters code and account creation</Typography>
            <Typography variant="body2">• resend activation code if not received</Typography>
            <Typography variant="body2">• user password reset through code sent by email</Typography>
            <Typography variant="body2">• user login</Typography>
            <Typography variant="body2">• user logout</Typography>
            <Typography variant="body2">• user change password once logged in</Typography>
            <Typography variant="body2">• account trial period</Typography>
            <Typography variant="body2">• edit of account billing information</Typography>
            <Typography variant="body2">• subscription creation</Typography>
            <Typography variant="body2">• plan change</Typography>
            <Typography variant="body2">• add new credit card</Typography>
            <Typography variant="body2">• remove credit card</Typography>
            <Typography variant="body2">• subscription cancel</Typography>
            <Typography variant="body2">• subscription re enable</Typography>
            <Typography variant="body2">• 3D Secure ready payments</Typography>
            <Typography variant="body2">• subscription handling via Stripe customer portal</Typography>
            <Typography variant="body2">• account's users list (by admins only)</Typography>
            <Typography variant="body2">• account's user create (by admins only)</Typography>
            <Typography variant="body2">• account's user update (by admins only)</Typography>
            <Typography variant="body2">• account's user delete (by admins only)</Typography>
          </Box>
        </Paper>
        
        <Paper sx={{ p: 2 }}>
          <Typography variant="h5" fontWeight="bold" mb={1} color="primary.main">
            API Features and Routes
          </Typography>
          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr', gap: 0.5 }}>
            <Typography variant="body2">• Complete authentication routes (/api/v1/auth/login, /signup, etc)</Typography>
            <Typography variant="body2">• User management endpoints (/api/v1/users/)</Typography>
            <Typography variant="body2">• Team management (/api/v1/teams/)</Typography>
            <Typography variant="body2">• Stripe integration (/api/v1/stripe/)</Typography>
            <Typography variant="body2">• OpenTelemetry tracing with Jaeger</Typography>
            <Typography variant="body2">• Span collection for performance monitoring</Typography>
            <Typography variant="body2">• account's users list (by account admins only)</Typography>
            <Typography variant="body2">• account's user create (by account admins only)</Typography>
            <Typography variant="body2">• account's user update (by account admins only)</Typography>
            <Typography variant="body2">• stripe webhooks handling</Typography>
            <Typography variant="body2">• events notifications by email: new user subscribed - successful payments - failed payments</Typography>
            <Typography variant="body2">• daily notifications by email: expiring trials - failed payments - account suspension due to failed payments</Typography>
          </Box>
        </Paper>
        
        <Paper sx={{ p: 2 }}>
          <Typography variant="h5" fontWeight="bold" mb={1} color="primary.main">
            NPM Packages Included
          </Typography>
          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0.5 }}>
            <Typography variant="body2">• axios</Typography>
            <Typography variant="body2">• multer</Typography>
            <Typography variant="body2">• @mui/material</Typography>
            <Typography variant="body2">• @mui/x-data-grid</Typography>
            <Typography variant="body2">• @emotion/react</Typography>
            <Typography variant="body2">• @opentelemetry/api</Typography>
            <Typography variant="body2">• react-router-dom</Typography>
            <Typography variant="body2">• @mui/icons-material</Typography>
            <Typography variant="body2">• @mui/x-tree-view</Typography>
            <Typography variant="body2">• @hookform/resolvers</Typography>
            <Typography variant="body2">• yup</Typography>
            <Typography variant="body2">• react-query</Typography>
            <Typography variant="body2">• react-hook-form</Typography>
            <Typography variant="body2">• @stripe/stripe-js</Typography>
            <Typography variant="body2">• moment</Typography>
            <Typography variant="body2">• react-i18next</Typography>
            <Typography variant="body2">• i18next@23.7.11</Typography>
            <Typography variant="body2">• papaparse</Typography>
            <Typography variant="body2">• lodash</Typography>
          </Box>
        </Paper>
        
        <Paper sx={{ p: 2 }}>
          <Typography variant="h5" fontWeight="bold" mb={1} color="primary.main">
            OpenTelemetry Features
          </Typography>
          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr', gap: 0.5 }}>
            <Typography variant="body2">• Performance monitoring with spans collection</Typography>
            <Typography variant="body2">• Trace linking between page navigations</Typography>
            <Typography variant="body2">• @opentelemetry/sdk-trace-web integration</Typography>
            <Typography variant="body2">• @opentelemetry/exporter-trace-otlp-http for data export</Typography>
            <Typography variant="body2">• @opentelemetry/resources for resource attribution</Typography>
            <Typography variant="body2">• @opentelemetry/sdk-trace-base for core tracing</Typography>
            <Typography variant="body2">• @opentelemetry/semantic-conventions for naming</Typography>
            <Typography variant="body2">• @opentelemetry/exporter-jaeger for visualization</Typography>
            <Typography variant="body2">• Dynamic trace naming for better visibility</Typography>
            <Typography variant="body2">• Page transition tracking with IDs</Typography>
          </Box>
        </Paper>
      </Box>
    </Paper>
  );
};

export const SetupStepsSection = () => {
  return (
    <Paper elevation={0} sx={{ bgcolor: 'primary.main', borderRadius: 2 }}>
      <Box sx={{ display: 'flex', alignItems: 'center' }}>
        <PlayArrowOutlinedIcon sx={{ fontSize: 60, ml: 2, color: 'white' }} />
        <Typography variant="h3" fontWeight="medium" color="white" sx={{ ml: 1 }}>
          Our Three-Step Launch Process
        </Typography>
      </Box>
      
      <Typography color="white" sx={{ fontSize: '1.1rem', mx: 2 }}>
        Select your preferred stack and go from zero to production in minutes.
      </Typography>
      
      <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr 1fr' }, gap: 2, m: 2 }}>
        <Paper sx={{ p: 2 }}>
          <Typography variant="h5" fontWeight="bold" gutterBottom color="primary.main">
            1. Clone
          </Typography>
          <Typography variant="body1">
            Get full source code access for complete customization to your requirements.
          </Typography>
          <Typography variant="body2" sx={{ mt: 1 }}>
            • npm install
          </Typography>
          <Typography variant="body2">
            • react@18 and react-dom@18
          </Typography>
          <Typography variant="body2">
            • Choose Node or Go backend
          </Typography>
        </Paper>
        
        <Paper sx={{ p: 2 }}>
          <Typography variant="h5" fontWeight="bold" gutterBottom color="primary.main">
            2. Configure
          </Typography>
          <Typography variant="body1">
            5-minute setup process with clear documentation and environment configuration.
          </Typography>
          <Typography variant="body2" sx={{ mt: 1 }}>
            • Set Stripe API keys
          </Typography>
          <Typography variant="body2">
            • Configure MongoDB connection
          </Typography>
          <Typography variant="body2">
            • Set email service settings
          </Typography>
        </Paper>
        
        <Paper sx={{ p: 2 }}>
          <Typography variant="h5" fontWeight="bold" gutterBottom color="primary.main">
            3. Build
          </Typography>
          <Typography variant="body1">
            Deploy your application and extend with custom features for your business case.
          </Typography>
          <Typography variant="body2" sx={{ mt: 1 }}>
            • npm start
          </Typography>
          <Typography variant="body2">
            • pm2 start npm --name development -- run start
          </Typography>
          <Typography variant="body2">
            • Add your own business logic
          </Typography>
        </Paper>
      </Box>
    </Paper>
  );
};

export const CallToActionSection = ({ color }) => {
  return (
    <Paper 
      elevation={0} 
      sx={{ 
        bgcolor: 'primary.main', 
        borderRadius: 2,
        textAlign: 'center'
      }}
    >
      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <RocketOutlinedIcon sx={{ color: 'white', fontSize: 60 }} />
        <Typography 
          variant="h4"
          color="white"
          fontWeight="medium"
        >
          Launch Your SaaS in Days, Not Months
        </Typography>
      </Box>
      <Typography 
        color="white"
        sx={{
          fontSize: '1.5rem',
          mb: 2
        }}
      >
        Start building value immediately with our production-ready foundation.
      </Typography>
      <Button 
        variant="contained" 
        size="large"
        sx={{
          fontSize: '1.2rem',
          textTransform: 'none',
          backgroundColor: 'white',
          color: 'primary.main',
          fontWeight: 'bold',
          px: 4,
          py: 1.5,
          mb: 2
        }}
      >
        Get the starters
      </Button>
    </Paper>
  );
};

// Main component that combines all sections - NOTICE: all spacing is done here, not in child components
export const SaasTemplate = () => {
  return (
    <Box sx={{ maxWidth: '1200px', mx: 'auto', p: 0 }}>
      <HeroSection />
      <Box sx={{ mt: 1 }}><LaunchSection /></Box>
      <Box sx={{ mt: 1 }}><FeaturesSection /></Box>
      <Box sx={{ mt: 1 }}><ComponentsSection /></Box>
      <Box sx={{ mt: 1 }}><LicenseSection /></Box>
      <Box sx={{ mt: 1 }}><TechStackSection /></Box>
      <Box sx={{ mt: 1 }}><FeaturesListSection /></Box>
      <Box sx={{ mt: 1 }}><SetupStepsSection /></Box>
      <Box sx={{ mt: 1 }}><CallToActionSection /></Box>
    </Box>
  );
};